<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radial stacked bar chart, sorted</title>
    <script src="/media/vdb1/work/d3-sankey/d3.v7.js"></script>
    <script src="/media/vdb1/work/d3-sankey/d3-sankey.js"></script>

</head>
<body>
<div id="chart"></div>

<script>
    // 定义数据
    const data = [{"state":"AL","age":"Under 5 Years","population":310504},{"state":"AK","age":"Under 5 Years","population":52083},{"state":"AZ","age":"Under 5 Years","population":515910},{"state":"AR","age":"Under 5 Years","population":202070},{"state":"CA","age":"Under 5 Years","population":2704659},{"state":"CO","age":"Under 5 Years","population":358280},{"state":"CT","age":"Under 5 Years","population":211637},{"state":"DE","age":"Under 5 Years","population":59319},{"state":"DC","age":"Under 5 Years","population":36352},{"state":"FL","age":"Under 5 Years","population":1140516},{"state":"GA","age":"Under 5 Years","population":740521},{"state":"HI","age":"Under 5 Years","population":87207},{"state":"ID","age":"Under 5 Years","population":121746},{"state":"IL","age":"Under 5 Years","population":894368},{"state":"IN","age":"Under 5 Years","population":443089},{"state":"IA","age":"Under 5 Years","population":201321},{"state":"KS","age":"Under 5 Years","population":202529},{"state":"KY","age":"Under 5 Years","population":284601},{"state":"LA","age":"Under 5 Years","population":310716},{"state":"ME","age":"Under 5 Years","population":71459},{"state":"MD","age":"Under 5 Years","population":371787},{"state":"MA","age":"Under 5 Years","population":383568},{"state":"MI","age":"Under 5 Years","population":625526},{"state":"MN","age":"Under 5 Years","population":358471},{"state":"MS","age":"Under 5 Years","population":220813},{"state":"MO","age":"Under 5 Years","population":399450},{"state":"MT","age":"Under 5 Years","population":61114},{"state":"NE","age":"Under 5 Years","population":132092},{"state":"NV","age":"Under 5 Years","population":199175},{"state":"NH","age":"Under 5 Years","population":75297},{"state":"NJ","age":"Under 5 Years","population":557421},{"state":"NM","age":"Under 5 Years","population":148323},{"state":"NY","age":"Under 5 Years","population":1208495},{"state":"NC","age":"Under 5 Years","population":652823},{"state":"ND","age":"Under 5 Years","population":41896},{"state":"OH","age":"Under 5 Years","population":743750},{"state":"OK","age":"Under 5 Years","population":266547},{"state":"OR","age":"Under 5 Years","population":243483},{"state":"PA","age":"Under 5 Years","population":737462},{"state":"RI","age":"Under 5 Years","population":60934},{"state":"SC","age":"Under 5 Years","population":303024},{"state":"SD","age":"Under 5 Years","population":58566},{"state":"TN","age":"Under 5 Years","population":416334},{"state":"TX","age":"Under 5 Years","population":2027307},{"state":"UT","age":"Under 5 Years","population":268916},{"state":"VT","age":"Under 5 Years","population":32635},{"state":"VA","age":"Under 5 Years","population":522672},{"state":"WA","age":"Under 5 Years","population":433119},{"state":"WV","age":"Under 5 Years","population":105435},{"state":"WI","age":"Under 5 Years","population":362277},{"state":"WY","age":"Under 5 Years","population":38253},{"state":"AL","age":"5 to 13 Years","population":552339},{"state":"AK","age":"5 to 13 Years","population":85640},{"state":"AZ","age":"5 to 13 Years","population":828669},{"state":"AR","age":"5 to 13 Years","population":343207},{"state":"CA","age":"5 to 13 Years","population":4499890},{"state":"CO","age":"5 to 13 Years","population":587154},{"state":"CT","age":"5 to 13 Years","population":403658},{"state":"DE","age":"5 to 13 Years","population":99496},{"state":"DC","age":"5 to 13 Years","population":50439},{"state":"FL","age":"5 to 13 Years","population":1938695},{"state":"GA","age":"5 to 13 Years","population":1250460},{"state":"HI","age":"5 to 13 Years","population":134025},{"state":"ID","age":"5 to 13 Years","population":201192},{"state":"IL","age":"5 to 13 Years","population":1558919},{"state":"IN","age":"5 to 13 Years","population":780199},{"state":"IA","age":"5 to 13 Years","population":345409},{"state":"KS","age":"5 to 13 Years","population":342134},{"state":"KY","age":"5 to 13 Years","population":493536},{"state":"LA","age":"5 to 13 Years","population":542341},{"state":"ME","age":"5 to 13 Years","population":133656},{"state":"MD","age":"5 to 13 Years","population":651923},{"state":"MA","age":"5 to 13 Years","population":701752},{"state":"MI","age":"5 to 13 Years","population":1179503},{"state":"MN","age":"5 to 13 Years","population":606802},{"state":"MS","age":"5 to 13 Years","population":371502},{"state":"MO","age":"5 to 13 Years","population":690476},{"state":"MT","age":"5 to 13 Years","population":106088},{"state":"NE","age":"5 to 13 Years","population":215265},{"state":"NV","age":"5 to 13 Years","population":325650},{"state":"NH","age":"5 to 13 Years","population":144235},{"state":"NJ","age":"5 to 13 Years","population":1011656},{"state":"NM","age":"5 to 13 Years","population":241326},{"state":"NY","age":"5 to 13 Years","population":2141490},{"state":"NC","age":"5 to 13 Years","population":1097890},{"state":"ND","age":"5 to 13 Years","population":67358},{"state":"OH","age":"5 to 13 Years","population":1340492},{"state":"OK","age":"5 to 13 Years","population":438926},{"state":"OR","age":"5 to 13 Years","population":424167},{"state":"PA","age":"5 to 13 Years","population":1345341},{"state":"RI","age":"5 to 13 Years","population":111408},{"state":"SC","age":"5 to 13 Years","population":517803},{"state":"SD","age":"5 to 13 Years","population":94438},{"state":"TN","age":"5 to 13 Years","population":725948},{"state":"TX","age":"5 to 13 Years","population":3277946},{"state":"UT","age":"5 to 13 Years","population":413034},{"state":"VT","age":"5 to 13 Years","population":62538},{"state":"VA","age":"5 to 13 Years","population":887525},{"state":"WA","age":"5 to 13 Years","population":750274},{"state":"WV","age":"5 to 13 Years","population":189649},{"state":"WI","age":"5 to 13 Years","population":640286},{"state":"WY","age":"5 to 13 Years","population":60890},{"state":"AL","age":"14 to 17 Years","population":259034},{"state":"AK","age":"14 to 17 Years","population":42153},{"state":"AZ","age":"14 to 17 Years","population":362642},{"state":"AR","age":"14 to 17 Years","population":157204},{"state":"CA","age":"14 to 17 Years","population":2159981},{"state":"CO","age":"14 to 17 Years","population":261701},{"state":"CT","age":"14 to 17 Years","population":196918},{"state":"DE","age":"14 to 17 Years","population":47414},{"state":"DC","age":"14 to 17 Years","population":25225},{"state":"FL","age":"14 to 17 Years","population":925060},{"state":"GA","age":"14 to 17 Years","population":557860},{"state":"HI","age":"14 to 17 Years","population":64011},{"state":"ID","age":"14 to 17 Years","population":89702},{"state":"IL","age":"14 to 17 Years","population":725973},{"state":"IN","age":"14 to 17 Years","population":361393},{"state":"IA","age":"14 to 17 Years","population":165883},{"state":"KS","age":"14 to 17 Years","population":155822},{"state":"KY","age":"14 to 17 Years","population":229927},{"state":"LA","age":"14 to 17 Years","population":254916},{"state":"ME","age":"14 to 17 Years","population":69752},{"state":"MD","age":"14 to 17 Years","population":316873},{"state":"MA","age":"14 to 17 Years","population":341713},{"state":"MI","age":"14 to 17 Years","population":585169},{"state":"MN","age":"14 to 17 Years","population":289371},{"state":"MS","age":"14 to 17 Years","population":174405},{"state":"MO","age":"14 to 17 Years","population":331543},{"state":"MT","age":"14 to 17 Years","population":53156},{"state":"NE","age":"14 to 17 Years","population":99638},{"state":"NV","age":"14 to 17 Years","population":142976},{"state":"NH","age":"14 to 17 Years","population":73826},{"state":"NJ","age":"14 to 17 Years","population":478505},{"state":"NM","age":"14 to 17 Years","population":112801},{"state":"NY","age":"14 to 17 Years","population":1058031},{"state":"NC","age":"14 to 17 Years","population":492964},{"state":"ND","age":"14 to 17 Years","population":33794},{"state":"OH","age":"14 to 17 Years","population":646135},{"state":"OK","age":"14 to 17 Years","population":200562},{"state":"OR","age":"14 to 17 Years","population":199925},{"state":"PA","age":"14 to 17 Years","population":679201},{"state":"RI","age":"14 to 17 Years","population":56198},{"state":"SC","age":"14 to 17 Years","population":245400},{"state":"SD","age":"14 to 17 Years","population":45305},{"state":"TN","age":"14 to 17 Years","population":336312},{"state":"TX","age":"14 to 17 Years","population":1420518},{"state":"UT","age":"14 to 17 Years","population":167685},{"state":"VT","age":"14 to 17 Years","population":33757},{"state":"VA","age":"14 to 17 Years","population":413004},{"state":"WA","age":"14 to 17 Years","population":357782},{"state":"WV","age":"14 to 17 Years","population":91074},{"state":"WI","age":"14 to 17 Years","population":311849},{"state":"WY","age":"14 to 17 Years","population":29314},{"state":"AL","age":"18 to 24 Years","population":450818},{"state":"AK","age":"18 to 24 Years","population":74257},{"state":"AZ","age":"18 to 24 Years","population":601943},{"state":"AR","age":"18 to 24 Years","population":264160},{"state":"CA","age":"18 to 24 Years","population":3853788},{"state":"CO","age":"18 to 24 Years","population":466194},{"state":"CT","age":"18 to 24 Years","population":325110},{"state":"DE","age":"18 to 24 Years","population":84464},{"state":"DC","age":"18 to 24 Years","population":75569},{"state":"FL","age":"18 to 24 Years","population":1607297},{"state":"GA","age":"18 to 24 Years","population":919876},{"state":"HI","age":"18 to 24 Years","population":124834},{"state":"ID","age":"18 to 24 Years","population":147606},{"state":"IL","age":"18 to 24 Years","population":1311479},{"state":"IN","age":"18 to 24 Years","population":605863},{"state":"IA","age":"18 to 24 Years","population":306398},{"state":"KS","age":"18 to 24 Years","population":293114},{"state":"KY","age":"18 to 24 Years","population":381394},{"state":"LA","age":"18 to 24 Years","population":471275},{"state":"ME","age":"18 to 24 Years","population":112682},{"state":"MD","age":"18 to 24 Years","population":543470},{"state":"MA","age":"18 to 24 Years","population":665879},{"state":"MI","age":"18 to 24 Years","population":974480},{"state":"MN","age":"18 to 24 Years","population":507289},{"state":"MS","age":"18 to 24 Years","population":305964},{"state":"MO","age":"18 to 24 Years","population":560463},{"state":"MT","age":"18 to 24 Years","population":95232},{"state":"NE","age":"18 to 24 Years","population":186657},{"state":"NV","age":"18 to 24 Years","population":212379},{"state":"NH","age":"18 to 24 Years","population":119114},{"state":"NJ","age":"18 to 24 Years","population":769321},{"state":"NM","age":"18 to 24 Years","population":203097},{"state":"NY","age":"18 to 24 Years","population":1999120},{"state":"NC","age":"18 to 24 Years","population":883397},{"state":"ND","age":"18 to 24 Years","population":82629},{"state":"OH","age":"18 to 24 Years","population":1081734},{"state":"OK","age":"18 to 24 Years","population":369916},{"state":"OR","age":"18 to 24 Years","population":338162},{"state":"PA","age":"18 to 24 Years","population":1203944},{"state":"RI","age":"18 to 24 Years","population":114502},{"state":"SC","age":"18 to 24 Years","population":438147},{"state":"SD","age":"18 to 24 Years","population":82869},{"state":"TN","age":"18 to 24 Years","population":550612},{"state":"TX","age":"18 to 24 Years","population":2454721},{"state":"UT","age":"18 to 24 Years","population":329585},{"state":"VT","age":"18 to 24 Years","population":61679},{"state":"VA","age":"18 to 24 Years","population":768475},{"state":"WA","age":"18 to 24 Years","population":610378},{"state":"WV","age":"18 to 24 Years","population":157989},{"state":"WI","age":"18 to 24 Years","population":553914},{"state":"WY","age":"18 to 24 Years","population":53980},{"state":"AL","age":"25 to 44 Years","population":1231572},{"state":"AK","age":"25 to 44 Years","population":198724},{"state":"AZ","age":"25 to 44 Years","population":1804762},{"state":"AR","age":"25 to 44 Years","population":754420},{"state":"CA","age":"25 to 44 Years","population":10604510},{"state":"CO","age":"25 to 44 Years","population":1464939},{"state":"CT","age":"25 to 44 Years","population":916955},{"state":"DE","age":"25 to 44 Years","population":230183},{"state":"DC","age":"25 to 44 Years","population":193557},{"state":"FL","age":"25 to 44 Years","population":4782119},{"state":"GA","age":"25 to 44 Years","population":2846985},{"state":"HI","age":"25 to 44 Years","population":356237},{"state":"ID","age":"25 to 44 Years","population":406247},{"state":"IL","age":"25 to 44 Years","population":3596343},{"state":"IN","age":"25 to 44 Years","population":1724528},{"state":"IA","age":"25 to 44 Years","population":750505},{"state":"KS","age":"25 to 44 Years","population":728166},{"state":"KY","age":"25 to 44 Years","population":1179637},{"state":"LA","age":"25 to 44 Years","population":1162463},{"state":"ME","age":"25 to 44 Years","population":331809},{"state":"MD","age":"25 to 44 Years","population":1556225},{"state":"MA","age":"25 to 44 Years","population":1782449},{"state":"MI","age":"25 to 44 Years","population":2628322},{"state":"MN","age":"25 to 44 Years","population":1416063},{"state":"MS","age":"25 to 44 Years","population":764203},{"state":"MO","age":"25 to 44 Years","population":1569626},{"state":"MT","age":"25 to 44 Years","population":236297},{"state":"NE","age":"25 to 44 Years","population":457177},{"state":"NV","age":"25 to 44 Years","population":769913},{"state":"NH","age":"25 to 44 Years","population":345109},{"state":"NJ","age":"25 to 44 Years","population":2379649},{"state":"NM","age":"25 to 44 Years","population":517154},{"state":"NY","age":"25 to 44 Years","population":5355235},{"state":"NC","age":"25 to 44 Years","population":2575603},{"state":"ND","age":"25 to 44 Years","population":154913},{"state":"OH","age":"25 to 44 Years","population":3019147},{"state":"OK","age":"25 to 44 Years","population":957085},{"state":"OR","age":"25 to 44 Years","population":1044056},{"state":"PA","age":"25 to 44 Years","population":3157759},{"state":"RI","age":"25 to 44 Years","population":277779},{"state":"SC","age":"25 to 44 Years","population":1193112},{"state":"SD","age":"25 to 44 Years","population":196738},{"state":"TN","age":"25 to 44 Years","population":1719433},{"state":"TX","age":"25 to 44 Years","population":7017731},{"state":"UT","age":"25 to 44 Years","population":772024},{"state":"VT","age":"25 to 44 Years","population":155419},{"state":"VA","age":"25 to 44 Years","population":2203286},{"state":"WA","age":"25 to 44 Years","population":1850983},{"state":"WV","age":"25 to 44 Years","population":470749},{"state":"WI","age":"25 to 44 Years","population":1487457},{"state":"WY","age":"25 to 44 Years","population":137338},{"state":"AL","age":"45 to 64 Years","population":1215966},{"state":"AK","age":"45 to 64 Years","population":183159},{"state":"AZ","age":"45 to 64 Years","population":1523681},{"state":"AR","age":"45 to 64 Years","population":727124},{"state":"CA","age":"45 to 64 Years","population":8819342},{"state":"CO","age":"45 to 64 Years","population":1290094},{"state":"CT","age":"45 to 64 Years","population":968967},{"state":"DE","age":"45 to 64 Years","population":230528},{"state":"DC","age":"45 to 64 Years","population":140043},{"state":"FL","age":"45 to 64 Years","population":4746856},{"state":"GA","age":"45 to 64 Years","population":2389018},{"state":"HI","age":"45 to 64 Years","population":331817},{"state":"ID","age":"45 to 64 Years","population":375173},{"state":"IL","age":"45 to 64 Years","population":3239173},{"state":"IN","age":"45 to 64 Years","population":1647881},{"state":"IA","age":"45 to 64 Years","population":788485},{"state":"KS","age":"45 to 64 Years","population":713663},{"state":"KY","age":"45 to 64 Years","population":1134283},{"state":"LA","age":"45 to 64 Years","population":1128771},{"state":"ME","age":"45 to 64 Years","population":397911},{"state":"MD","age":"45 to 64 Years","population":1513754},{"state":"MA","age":"45 to 64 Years","population":1751508},{"state":"MI","age":"45 to 64 Years","population":2706100},{"state":"MN","age":"45 to 64 Years","population":1391878},{"state":"MS","age":"45 to 64 Years","population":730133},{"state":"MO","age":"45 to 64 Years","population":1554812},{"state":"MT","age":"45 to 64 Years","population":278241},{"state":"NE","age":"45 to 64 Years","population":451756},{"state":"NV","age":"45 to 64 Years","population":653357},{"state":"NH","age":"45 to 64 Years","population":388250},{"state":"NJ","age":"45 to 64 Years","population":2335168},{"state":"NM","age":"45 to 64 Years","population":501604},{"state":"NY","age":"45 to 64 Years","population":5120254},{"state":"NC","age":"45 to 64 Years","population":2380685},{"state":"ND","age":"45 to 64 Years","population":166615},{"state":"OH","age":"45 to 64 Years","population":3083815},{"state":"OK","age":"45 to 64 Years","population":918688},{"state":"OR","age":"45 to 64 Years","population":1036269},{"state":"PA","age":"45 to 64 Years","population":3414001},{"state":"RI","age":"45 to 64 Years","population":282321},{"state":"SC","age":"45 to 64 Years","population":1186019},{"state":"SD","age":"45 to 64 Years","population":210178},{"state":"TN","age":"45 to 64 Years","population":1646623},{"state":"TX","age":"45 to 64 Years","population":5656528},{"state":"UT","age":"45 to 64 Years","population":538978},{"state":"VT","age":"45 to 64 Years","population":188593},{"state":"VA","age":"45 to 64 Years","population":2033550},{"state":"WA","age":"45 to 64 Years","population":1762811},{"state":"WV","age":"45 to 64 Years","population":514505},{"state":"WI","age":"45 to 64 Years","population":1522038},{"state":"WY","age":"45 to 64 Years","population":147279},{"state":"AL","age":"65 Years and Over","population":641667},{"state":"AK","age":"65 Years and Over","population":50277},{"state":"AZ","age":"65 Years and Over","population":862573},{"state":"AR","age":"65 Years and Over","population":407205},{"state":"CA","age":"65 Years and Over","population":4114496},{"state":"CO","age":"65 Years and Over","population":511094},{"state":"CT","age":"65 Years and Over","population":478007},{"state":"DE","age":"65 Years and Over","population":121688},{"state":"DC","age":"65 Years and Over","population":70648},{"state":"FL","age":"65 Years and Over","population":3187797},{"state":"GA","age":"65 Years and Over","population":981024},{"state":"HI","age":"65 Years and Over","population":190067},{"state":"ID","age":"65 Years and Over","population":182150},{"state":"IL","age":"65 Years and Over","population":1575308},{"state":"IN","age":"65 Years and Over","population":813839},{"state":"IA","age":"65 Years and Over","population":444554},{"state":"KS","age":"65 Years and Over","population":366706},{"state":"KY","age":"65 Years and Over","population":565867},{"state":"LA","age":"65 Years and Over","population":540314},{"state":"ME","age":"65 Years and Over","population":199187},{"state":"MD","age":"65 Years and Over","population":679565},{"state":"MA","age":"65 Years and Over","population":871098},{"state":"MI","age":"65 Years and Over","population":1304322},{"state":"MN","age":"65 Years and Over","population":650519},{"state":"MS","age":"65 Years and Over","population":371598},{"state":"MO","age":"65 Years and Over","population":805235},{"state":"MT","age":"65 Years and Over","population":137312},{"state":"NE","age":"65 Years and Over","population":240847},{"state":"NV","age":"65 Years and Over","population":296717},{"state":"NH","age":"65 Years and Over","population":169978},{"state":"NJ","age":"65 Years and Over","population":1150941},{"state":"NM","age":"65 Years and Over","population":260051},{"state":"NY","age":"65 Years and Over","population":2607672},{"state":"NC","age":"65 Years and Over","population":1139052},{"state":"ND","age":"65 Years and Over","population":94276},{"state":"OH","age":"65 Years and Over","population":1570837},{"state":"OK","age":"65 Years and Over","population":490637},{"state":"OR","age":"65 Years and Over","population":503998},{"state":"PA","age":"65 Years and Over","population":1910571},{"state":"RI","age":"65 Years and Over","population":147646},{"state":"SC","age":"65 Years and Over","population":596295},{"state":"SD","age":"65 Years and Over","population":116100},{"state":"TN","age":"65 Years and Over","population":819626},{"state":"TX","age":"65 Years and Over","population":2472223},{"state":"UT","age":"65 Years and Over","population":246202},{"state":"VT","age":"65 Years and Over","population":86649},{"state":"VA","age":"65 Years and Over","population":940577},{"state":"WA","age":"65 Years and Over","population":783877},{"state":"WV","age":"65 Years and Over","population":285067},{"state":"WI","age":"65 Years and Over","population":750146},{"state":"WY","age":"65 Years and Over","population":65614}];
    // 定义图表配置
    const linkColor = "source-target"; // 或 "source" 或 "target"
    // const linkColor = "source"; // 或 "source" 或 "target"
    // const linkColor = "target"; // 或 "source" 或 "target"
    const nodeAlign = "sankeyJustify"; // 或 "sankeyRight", "sankeyCenter", "sankeyJustify"

    // 定义 chart 函数
    function chart() {
        const width = 928;
        const height = width;
        const innerRadius = 180;
        const outerRadius = Math.min(width, height) * 0.67;

        // Stack the data into series by age
        const series = d3.stack()
            .keys(d3.union(data.map(d => d.age))) // distinct series keys, in input order
            .value(([, D], key) => D.get(key).population) // get value for each series key and stack
            (d3.index(data, d => d.state, d => d.age)); // group by stack then series key

        const arc = d3.arc()
            .innerRadius(d => y(d[0]))
            .outerRadius(d => y(d[1]))
            .startAngle(d => x(d.data[0]))
            .endAngle(d => x(d.data[0]) + x.bandwidth())
            .padAngle(1.5 / innerRadius)
            .padRadius(innerRadius);

        // An angular x-scale
        const x = d3.scaleBand()
            .domain(d3.groupSort(data, D => -d3.sum(D, d => d.population), d => d.state))
            .range([0, 2 * Math.PI])
            .align(0);

        // A radial y-scale maintains area proportionality of radial bars
        const y = d3.scaleRadial()
            .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
            .range([innerRadius, outerRadius]);

        const color = d3.scaleOrdinal()
            .domain(series.map(d => d.key))
            .range(d3.schemeSpectral[series.length])
            .unknown("#ccc");

        // A function to format the value in the tooltip
        const formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en")

        const svg = d3.create("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("viewBox", [-width / 2, -height * 0.69, width, height])
            .attr("style", "width: 100%; height: auto; font: 10px sans-serif;");

        // A group for each series, and a rect for each element in the series
        svg.append("g")
            .selectAll()
            .data(series)
            .join("g")
            .attr("fill", d => color(d.key))
            .selectAll("path")
            .data(D => D.map(d => (d.key = D.key, d)))
            .join("path")
            .attr("d", arc)
            .append("title")
            .text(d => `${d.data[0]} ${d.key}\n${formatValue(d.data[1].get(d.key).population)}`);

        // x axis
        svg.append("g")
            .attr("text-anchor", "middle")
            .selectAll()
            .data(x.domain())
            .join("g")
            .attr("transform", d => `
        rotate(${((x(d) + x.bandwidth() / 2) * 180 / Math.PI - 90)})
        translate(${innerRadius},0)
      `)
            .call(g => g.append("line")
                .attr("x2", -5)
                .attr("stroke", "#000"))
            .call(g => g.append("text")
                .attr("transform", d => (x(d) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI
                    ? "rotate(90)translate(0,16)"
                    : "rotate(-90)translate(0,-9)")
                .text(d => d));

        // y axis
        svg.append("g")
            .attr("text-anchor", "end")
            .call(g => g.append("text")
                .attr("x", -6)
                .attr("y", d => -y(y.ticks(10).pop()))
                .attr("dy", "-2em")
                .text("Population"))
            .call(g => g.selectAll("g")
                .data(y.ticks(10).slice(1))
                .join("g")
                .attr("fill", "none")
                .call(g => g.append("circle")
                    .attr("stroke", "#000")
                    .attr("stroke-opacity", 0.5)
                    .attr("r", y))
                .append("text")
                .attr("x", -6)
                .attr("y", d => -y(d))
                .attr("dy", "0.35em")
                .attr("paint-order", "stroke")
                .attr("stroke", "#fff")
                .attr("fill", "#000")
                .attr("stroke-width", 5)
                .text(y.tickFormat(5, "s")));

        // color legend
        svg.append("g")
            .selectAll()
            .data(color.domain())
            .join("g")
            .attr("transform", (d, i, nodes) => `translate(-40,${(nodes.length / 2 - i - 1) * 20})`)
            .call(g => g.append("rect")
                .attr("width", 18)
                .attr("height", 18)
                .attr("fill", color))
            .call(g => g.append("text")
                .attr("x", 24)
                .attr("y", 9)
                .attr("dy", "0.35em")
                .text(d => d));

        return svg.node();
    }

    // 渲染图表
    const chartElement = chart();
    document.getElementById("chart").appendChild(chartElement);
</script>
</body>
</html>